import React, { useState } from 'react';
import { Layout, Skeleton, Tabs, Select, Row, Col, Button } from 'antd';
import { JSX } from "react/jsx-runtime";

import TaskCard from '../components/TaskCard'
import FiltersList from '../views/FiltersList'
import MyList from '../views/MyList'
import TaskSearch from '../components/TaskSearch';
const { Header, Content } = Layout;
const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  height: '20vh',
  padding: '10px',
  background: 'white'
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  background: 'white'
};

const layoutStyle = {
  overflow: 'hidden',
  height: '100vh'
};
const searchStyle = {
  padding: '5px 10px',
  borderTop: '1px solid black',
  borderBottom: '1px solid black',
}
const list = [
  {
    id: '1',
    cardNum: 100,
    cardText: 'cardText1'
  },
  {
    id: '2',
    cardNum: 670,
    cardText: 'cardText2'
  },
  {
    id: '3',
    cardNum: 450,
    cardText: 'cardText3'
  },
  {
    id: '4',
    cardNum: 460,
    cardText: 'cardText4'
  }
]

const MainLayout: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const items= [
    {
      key: '1',
      label: 'Tab 1',
      children: <FiltersList/>,
    },
    {
      key: '2',
      label: 'Tab 2',
      children: <MyList/>,
    },
    {
      key: '3',
      label: 'Tab 3',
      children: 'Content of Tab Pane 3',
    },
  ];
  const showSkeleton = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };
  return <>
    {loading ? <Skeleton /> :
      <>
        <Layout style={layoutStyle}>
          <Header style={headerStyle}>
            <Row gutter={10}>
              {list.length > 0 && list.map((q: JSX.IntrinsicAttributes & { id: string; cardText: string; cardNum: number }) => {
                const { id } = q
                return <Col span={6} key={id}>
                  <TaskCard  {...q} />
                </Col>
              })}
            </Row>
          </Header>
          <Content style={contentStyle}>
            <TaskSearch/>
            <Tabs type="card" items={items}
            />
            <Button onClick={showSkeleton} disabled={loading}>
              Show Skeleton
            </Button>
          </Content>
        </Layout>
      </>
    }
  </>
}

export default MainLayout;